<template>
	<cl-page>
		<view class="goods-detail">
			<!-- 自定义导航栏 -->
			<cl-topbar
				:border="false"
				:ref="setRefs('topbar')"
				with-mp
				background="transparent"
				:opacity="navOpacity"
			>
			</cl-topbar>

			<!-- 商品图片区域 -->
			<view class="image-section">
				<swiper
					class="goods-swiper"
					:autoplay="false"
					:indicator-dots="true"
					indicator-color="rgba(255,255,255,0.5)"
					indicator-active-color="#ffffff"
					@change="onImageChange"
				>
					<swiper-item v-for="(image, index) in goodsImages" :key="index">
						<image
							:src="image"
							class="goods-image"
							mode="aspectFit"
							@tap="previewImage(index)"
						/>
					</swiper-item>
				</swiper>
			</view>

			<!-- 商品信息区域 -->
			<view class="info-section">
				<!-- 价格和基本信息 -->
				<view class="price-info">
					<!-- 秒杀价格显示 -->
					<template v-if="seckillPromotions.length > 0">
						<view class="price-main" v-if="userStore.token">
							<text class="seckill-price">¥{{ Number(seckillPromotions[0].seckillPrice).toFixed(2) }}</text>
							<text class="price-unit">/ {{ goods.unit }}</text>
							<text class="original-price">{{ formatUserPrice(goods.price, userStore, 1) }}</text>
							<view class="seckill-tag">
								<cl-icon name="flash" size="12" color="#fff"></cl-icon>
								<text class="tag-text">秒杀价</text>
							</view>
						</view>
						<view class="price-main" v-else>
							<text class="price-login-tip">登录后查看秒杀价</text>
						</view>
					</template>
					<!-- 常规价格显示 -->
					<template v-else>
						<view class="price-main" v-if="userStore.token">
							<text class="price-value">{{
								formatUserPrice(goods.price, userStore, goods.noDiscounts)
							}}</text>
							<text class="price-unit">/ {{ goods.unit }}</text>
							<text class="original-price" v-if="hasDiscount">
								{{ formatUserPrice(goods.price, userStore, 1) }}
							</text>
						</view>
						<view class="price-main" v-else>
							<text class="price-login-tip">登录后查看价格</text>
						</view>
					</template>
					<view class="price-actions">
						<view class="collect-btn" @tap="toggleCollect">
							<cl-icon
								:name="isCollected ? 'cl-icon-favor_fill' : 'cl-icon-favor'"
								:size="48"
								:color="isCollected ? '#ff4444' : '#666'"
							/>
							<text class="collect-text">{{ isCollected ? "已收藏" : "收藏" }}</text>
						</view>
					</view>
				</view>
				
				<!-- 促销信息展示 -->
				<view class="promotion-info" v-if="hasPromotions">
					<!-- 买赠促销 -->
					<view
						v-for="(buyGift, index) in buyGiftPromotions"
						:key="`buy-gift-${index}`"
						class="promotion-item buy-gift"
					>
						<view class="promo-badge">
							<cl-icon name="gift" size="12" color="#fff"></cl-icon>
							<text class="badge-text">买{{ Number(buyGift.num) }}送{{ Number(buyGift.freeNum) }}</text>
						</view>
						<view class="promo-content">
							<view class="promo-description">
								<text class="promo-text">
									{{ buyGift.remark || `赠品：${buyGift.freeGoodsInfo?.title || '赠品信息待更新'}` }}
								</text>
								<!-- 近效期信息 -->
								<view
									v-if="buyGift.freeGoodsInfo?.nearestExpiredDate"
									class="expiry-tag"
									:class="{ 'near-expiry': isNearExpiry(buyGift.freeGoodsInfo.nearestExpiredDate) }"
								>
									<text class="expiry-text">
										赠品效期：{{ formatBatchDate(buyGift.freeGoodsInfo.nearestExpiredDate) }}
									</text>
								</view>
							</view>
							<view class="promo-action">
								<view 
									class="promo-btn"
									@tap="showBuyGiftConfirm(index)"
									:class="{ 'disabled': !canBuyGift || isBuyGiftPurchasing }"
								>
									<text class="btn-text">参与买赠</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 秒杀促销 -->
					<view
						v-for="(seckill, index) in seckillPromotions"
						:key="`seckill-${index}`"
						class="promotion-item seckill"
					>
						<view class="promo-badge seckill-badge">
							<cl-icon name="flash" size="12" color="#fff"></cl-icon>
							<text class="badge-text">限时秒杀</text>
						</view>
						<view class="promo-content">
							<text class="promo-price">¥{{ Number(seckill.seckillPrice).toFixed(2) }}</text>
							<text class="promo-text">仅剩{{ Math.floor(Number(seckill.seckillStorNum)) }}件</text>
						</view>
					</view>

					<!-- 套餐促销 -->
					<view
						v-if="comboPromotions.length > 0"
						class="promotion-item combo"
						@tap="viewComboPromotions"
					>
						<view class="promo-badge combo-badge">
							<cl-icon name="box" size="12" color="#fff"></cl-icon>
							<text class="badge-text">套餐优惠</text>
						</view>
						<view class="promo-content">
							<text class="promo-text">该商品参与{{ comboPromotions.length }}个套餐活动</text>
							<cl-icon name="arrow-right" size="16" color="#666"></cl-icon>
						</view>
					</view>

					<!-- 满减信息 -->
					<view
						v-if="activePromotions.some(p => p.promType === '满减')"
						class="promotion-item full-reduce"
					>
						<view class="promo-badge full-reduce-badge">
							<cl-icon name="price-tag" size="12" color="#fff"></cl-icon>
							<text class="badge-text">满减活动</text>
						</view>
						<view class="promo-content">
							<text class="promo-text">购物车满额享优惠</text>
						</view>
					</view>
				</view>
				<view class="stock-tags">
					<view class="tag success" v-if="!isLowStock">库存充足</view>
					<view class="tag warning" v-if="isLowStock">库存紧张</view>
					<view class="tag prescription" v-if="goods.isPres === 1">
						<cl-icon name="cl-icon-yao" :size="24" />
						<text>处方药</text>
					</view>
				</view>

				<!-- 商品标题 -->
				<view class="goods-title">
					<text class="title-text">{{ goods.title }}</text>
					<text class="sub-title" v-if="goods.oracleGoodsName">{{
						goods.oracleGoodsName
					}}</text>
				</view>

				<!-- 服务承诺 -->
				<view class="service-promises">
					<view class="promise-item">
						<cl-icon name="shield-check" size="16" color="#52c41a"></cl-icon>
						<text class="promise-text">正品保障</text>
					</view>
					<view class="promise-item">
						<cl-icon name="truck" size="16" color="#52c41a"></cl-icon>
						<text class="promise-text">快速配送</text>
					</view>
					<view class="promise-item">
						<cl-icon name="refresh" size="16" color="#52c41a"></cl-icon>
						<text class="promise-text">无忧退换</text>
					</view>
				</view>

				<!-- 商品详细信息 -->
				<view class="goods-details">
					<view class="detail-item">
						<text class="detail-label">商品规格</text>
						<text class="detail-value">{{ goods.goodsSpec }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">生产厂家</text>
						<text class="detail-value">{{ goods.manufacturer }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">批准文号</text>
						<text class="detail-value">{{ goods.approvalNo }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">药品剂型</text>
						<text class="detail-value">{{ goods.formula }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">包装规格</text>
						<view class="detail-value">
							<view class="package-info">
								<text class="package-type">{{
									goods.midpack > 1 ? "中包装" : "件包装"
								}}</text>
								<text class="package-desc" v-if="goods.midpack > 1"
									>{{ goods.midpack }}{{ goods.unit }}</text
								>
							</view>
							<view class="package-sale" v-if="goods.midpack > 1">
								<text
									:class="[
										'sale-status',
										goods.isMidpackSaleDisabled === 0 ? 'allow' : 'forbid',
									]"
								>
									{{
										goods.isMidpackSaleDisabled === 0
											? "支持拆零"
											: "不支持拆零"
									}}
								</text>
							</view>
						</view>
					</view>
					<view class="detail-item">
						<text class="detail-label">库存状态</text>
						<text class="detail-value" :class="{ 'low-stock': isLowStock }">
							{{ isLowStock ? "库存紧张" : "库存充足" }}
						</text>
					</view>
				</view>
			</view>

			<!-- 商品详情内容 -->
			<view class="content-section" v-if="goods.content">
				<view class="section-title">商品详情</view>
				<view class="content-html">
					<!-- 这里应该渲染HTML内容，可以使用mp-html等组件 -->
					<text class="content-text">{{ goods.content }}</text>
				</view>
			</view>

			<!-- 相关推荐 -->
			<view class="recommend-section" v-if="recommendList.length > 0">
				<view class="section-header">
					<view class="section-title">
						<cl-icon name="cl-icon-like" :size="36" color="#ff6b6b" />
						<text>相关推荐</text>
					</view>
					<view class="more-link" @tap="toProductList">
						<text>查看更多</text>
						<cl-icon name="cl-icon-arrow-right" :size="28" color="#999" />
					</view>
				</view>
				<scroll-view scroll-x class="recommend-list">
					<view
						class="recommend-item"
						v-for="item in recommendList"
						:key="item.id"
						@tap="toDetail(item.id)"
					>
						<view class="item-image">
							<image
								:src="
									'https://shop.sdamdyy.cn/' +
									(item.mainPic || '/static/icon/no-image.png')
								"
								mode="aspectFill"
							/>
							<view class="discount-tag" v-if="item.discount">
								{{ item.discount }}折
							</view>
						</view>
						<view class="item-info">
							<view class="item-name">{{ item.oracleGoodsName }}</view>
							<view class="item-spec">{{ item.goodsSpec }}</view>
							<view class="item-price" v-if="userStore.token">
								<text class="value">{{
									formatUserPrice(item.price, userStore, item.noDiscounts)
								}}</text>
								<text
									class="original-value"
									v-if="hasDiscount && item.noDiscounts !== 1"
								>
									{{ formatUserPrice(item.price, userStore, 1) }}
								</text>
							</view>
							<view class="item-price" v-else>
								<text class="login-tip">登录查看</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 底部操作栏 -->
			<view class="bottom-actions">
				<view class="action-left">
					<view class="action-item" @tap="toHome">
						<cl-icon name="cl-icon-home" :size="40" color="#666"></cl-icon>
						<text class="action-text">首页</text>
					</view>
					<view class="action-item" @tap="toCart">
						<cl-icon name="cl-icon-cart" :size="40" color="#666"></cl-icon>
						<text class="action-text">购物车</text>
						<view class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</view>
					</view>
				</view>
				<view class="action-right">
					<!-- 秒杀按钮 -->
					<view
						v-if="seckillPromotions.length > 0"
						class="action-btn seckill-btn"
						@tap="showSeckillSelector"
						:class="{ 'disabled': !canSeckill || isSeckillPurchasing }"
					>
						<cl-loading
							v-if="isSeckillPurchasing"
							size="16"
							color="#fff"
							style="margin-right: 8rpx"
						></cl-loading>
						<cl-icon v-else name="flash" size="16" color="#fff" style="margin-right: 8rpx"></cl-icon>
						<text class="btn-text">{{ isSeckillPurchasing ? '秒杀中...' : '立即秒杀' }}</text>
					</view>
					<!-- 套餐按钮 -->
					<view
						v-if="comboPromotions.length > 0"
						class="action-btn combo-btn"
						@tap="viewComboPromotions"
					>
						<cl-icon name="box" size="16" color="#fff" style="margin-right: 8rpx"></cl-icon>
						<text class="btn-text">查看套餐</text>
					</view>
					<!-- 常规购买按钮 -->
					<view class="action-btn add-cart" @tap="addToCart">
						<cl-icon name="shopping-cart" size="16" color="#fff" style="margin-right: 8rpx"></cl-icon>
						<text class="btn-text">加入购物车</text>
					</view>
				</view>
			</view>

			<!-- 秒杀数量选择弹窗 -->
			<cl-popup v-model="showSeckillPopup" direction="bottom" size="70%">
				<view class="seckill-popup">
					<view class="popup-header">
						<text class="popup-title">秒杀购买</text>
						<view class="close-btn" @tap="showSeckillPopup = false">
							<text class="close-icon">✕</text>
						</view>
					</view>
					
					<!-- 秒杀购买内容 -->
					<view class="popup-content-simple">
						<view v-if="seckillPromotions.length > 0" class="seckill-content">
							<!-- 商品信息 -->
							<view class="goods-info">
								<image
									:src="goodsImages[0]"
									class="goods-image"
									mode="aspectFill"
								/>
								<view class="goods-details">
									<text class="goods-name">{{ goods.title }}</text>
									<text class="goods-spec">{{ goods.goodsSpec }}</text>
								</view>
							</view>
							
							<!-- 价格信息 -->
							<view class="price-info">
								<view class="price-row">
									<text class="seckill-price">¥{{ Number(seckillPromotions[0].seckillPrice).toFixed(2) }}</text>
									<text class="original-price">¥{{ goods.price }}</text>
								</view>
								<text class="stock-info">仅剩 {{ Math.floor(Number(seckillPromotions[0].seckillStorNum)) }} 件</text>
							</view>
							
							<!-- 数量选择 -->
							<view class="quantity-section">
								<text class="quantity-label">购买数量：</text>
								<view class="quantity-controls">
									<button class="quantity-btn" @tap="decreaseSeckillQuantity">-</button>
									<text class="quantity-number">{{ seckillQuantity }}</text>
									<button class="quantity-btn" @tap="increaseSeckillQuantity">+</button>
								</view>
								<text class="quantity-tip">限购 {{ Math.floor(Number(seckillPromotions[0].seckillNum)) }} 件</text>
							</view>
							
							<!-- 总价 -->
							<view class="total-price">
								<text class="total-label">总价：</text>
								<text class="total-amount">¥{{ (Number(seckillPromotions[0].seckillPrice) * seckillQuantity).toFixed(2) }}</text>
							</view>
						</view>
						<view v-else class="loading-content">
							<text class="loading-text">加载秒杀信息中...</text>
						</view>
					</view>
					
					<view class="popup-footer">
						<view class="popup-btn cancel-btn" @tap="showSeckillPopup = false">
							<text class="btn-text">取消</text>
						</view>
						<view 
							class="popup-btn confirm-btn"
							:class="{ 'disabled': (seckillPromotions.length === 0) || !canSeckill || isSeckillPurchasing }"
							@tap="confirmSeckillPurchase"
						>
							<text class="btn-text">{{ isSeckillPurchasing ? '秒杀中...' : (seckillPromotions.length > 0 ? '立即秒杀' : '加载中...') }}</text>
						</view>
					</view>
				</view>
			</cl-popup>

			<!-- 买赠选择弹窗 -->
			<cl-popup v-model="showBuyGiftPopup" direction="bottom" size="80%">
				<view class="buygift-popup">
					<view class="popup-header">
						<text class="popup-title">买赠套餐选择</text>
						<view class="close-btn" @tap="showBuyGiftPopup = false">
							<text class="close-icon">✕</text>
						</view>
					</view>
					
					<view class="popup-content-simple">
						<view v-if="activePromotions.some(p => p.promType === '买赠')" class="buygift-content">
							<!-- 套餐选择 -->
							<view class="combo-selector">
								<text class="selector-label">选择套餐：</text>
								<view 
									v-for="(rule, index) in activePromotions.find(p => p.promType === '买赠')?.details || []"
									:key="index"
									class="combo-option"
									:class="{ 'selected': selectedBuyGiftIndex === index }"
									@tap="onBuyGiftRuleChange(index)"
								>
									<view class="main-goods">
										<text class="goods-name">{{ rule.goodsInfo?.title || goods.title }}</text>
										<text class="goods-spec">{{ rule.goodsInfo?.goodsSpec || goods.goodsSpec }}</text>
										<text class="buy-quantity">买 {{ Number(rule.num) }}{{ rule.goodsInfo?.unit || goods.unit }}</text>
									</view>
									<view class="arrow-icon">→</view>
									<view class="gift-goods" v-if="rule.freeGoodsInfo">
										<text class="gift-name">{{ rule.freeGoodsInfo.title }}</text>
										<text class="gift-spec">{{ rule.freeGoodsInfo.goodsSpec }}</text>
										<text class="gift-quantity">赠 {{ Number(rule.freeNum) }}{{ rule.freeGoodsInfo.unit || '件' }}</text>
									</view>
									<view class="selection-indicator" v-if="selectedBuyGiftIndex === index">
										<text class="indicator-icon">✓</text>
									</view>
								</view>
							</view>
							
							<!-- 数量选择 -->
							<view class="quantity-section">
								<text class="quantity-label">购买数量：</text>
								<view class="quantity-controls">
									<button class="quantity-btn" @tap="decreaseBuyGiftQuantity">-</button>
									<text class="quantity-number">{{ buyGiftQuantity }}</text>
									<button class="quantity-btn" @tap="increaseBuyGiftQuantity">+</button>
								</view>
								<text class="quantity-tip">{{ Number(activePromotions.find(p => p.promType === '买赠')?.details[selectedBuyGiftIndex]?.num || 1) }}的倍数</text>
							</view>
							
							<!-- 总价信息 -->
							<view class="total-info" v-if="userStore.token">
								<view class="total-row">
									<text class="total-label">商品小计：</text>
									<text class="total-amount">{{ formatUserPrice((activePromotions.find(p => p.promType === '买赠')?.details[selectedBuyGiftIndex]?.goodsInfo?.price || goods.price) * buyGiftQuantity, userStore, activePromotions.find(p => p.promType === '买赠')?.details[selectedBuyGiftIndex]?.goodsInfo?.noDiscounts || goods.noDiscounts) }}</text>
								</view>
								<view class="gift-info">
									<text class="gift-label">赠品价值：</text>
									<text class="gift-value">¥{{ Number(activePromotions.find(p => p.promType === '买赠')?.details[selectedBuyGiftIndex]?.freeTaxPrice || 0).toFixed(2) }}</text>
								</view>
							</view>
						</view>
						<view v-else class="loading-content">
							<text class="loading-text">加载买赠信息中...</text>
						</view>
					</view>
					
					<view class="popup-footer">
						<view class="popup-btn cancel-btn" @tap="showBuyGiftPopup = false">
							<text class="btn-text">取消</text>
						</view>
						<view 
							class="popup-btn confirm-btn"
							:class="{ 'disabled': !canBuyGift || isBuyGiftPurchasing }"
							@tap="confirmBuyGiftPurchase()"
						>
							<text class="btn-text">{{ isBuyGiftPurchasing ? '下单中...' : '确认购买' }}</text>
						</view>
					</view>
				</view>
			</cl-popup>

			<!-- 规格选择弹窗 -->
			<spec-selector
				:show="showSpecSelector"
				:goods="goods"
				:mode="specMode"
				@close="showSpecSelector = false"
				@confirm="onSpecConfirm"
			/>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import { onReady, onPageScroll, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { router, useCool } from "/@/cool";
import { useUserStore } from "/@/cool/store";
import { formatUserPrice } from "/@/utils/price";
import SpecSelector from "./components/spec-selector.vue";
import dayjs from "dayjs";

const { service, refs, setRefs } = useCool();
const userStore = useUserStore();

// 页面数据
const goods = ref<any>({});
const cartCount = ref(0);
const showSpecSelector = ref(false);
const specMode = ref<"cart" | "buy">("cart");
const navOpacity = ref(0);
const isCollected = ref(false);
const recommendList = ref<any[]>([]);

// 促销相关数据
const activePromotions = ref<any[]>([]);
const buyGiftPromotions = ref<any[]>([]);
const seckillPromotions = ref<any[]>([]);
const comboPromotions = ref<any[]>([]);
const isLoadingPromotions = ref(false);
// 秒杀和买赠购买数量
const seckillQuantity = ref(1);
const buyGiftQuantity = ref(1);
// 购买状态
const isSeckillPurchasing = ref(false);
const isBuyGiftPurchasing = ref(false);
// 弹窗状态
const showSeckillPopup = ref(false);
const showBuyGiftPopup = ref(false);
// 买赠选择
const selectedBuyGiftIndex = ref(0);

// 计算属性
const goodsImages = computed(() => {
	const images = [];
	if (goods.value.mainPic) {
		const mainPic = goods.value.mainPic;
		if (mainPic.startsWith("http")) {
			images.push(mainPic);
		} else if (mainPic.startsWith("/")) {
			images.push("https://shop.sdamdyy.cn" + mainPic);
		} else {
			images.push("https://shop.sdamdyy.cn/" + mainPic);
		}
	}
	if (goods.value.pics && Array.isArray(goods.value.pics)) {
		images.push(
			...goods.value.pics.map((pic: string) => {
				if (!pic) return pic;
				if (pic.startsWith("http")) return pic;
				if (pic.startsWith("/")) return "https://shop.sdamdyy.cn" + pic;
				return "https://shop.sdamdyy.cn/" + pic;
			})
		);
	}
	return images.length > 0 ? images : ["/static/empty/no.jpg"];
});

const isLowStock = computed(() => {
	return Number(goods.value.storNum || 0) < 10;
});

const hasDiscount = computed(() => {
	// 检查用户是否有折扣
	return (
		userStore.token &&
		userStore.info?.discount &&
		userStore.info.discount < 1 &&
		goods.value.noDiscounts !== 1
	);
});

// 计算是否有促销活动
const hasPromotions = computed(() => {
	return activePromotions.value.length > 0;
});

// 计算是否可以秒杀
const canSeckill = computed(() => {
	if (seckillPromotions.value.length === 0) return false;
	const seckill = seckillPromotions.value[0];
	return Math.floor(Number(seckill.seckillStorNum || 0)) > 0;
});

// 计算是否可以买赠
const canBuyGift = computed(() => {
	return buyGiftPromotions.value.length > 0;
});

// 页面方法
async function loadGoodsDetail() {
	try {
		const goodsId = router.query.id;
		console.log("加载商品详情，ID:", goodsId);

		if (!goodsId) {
			console.error("商品ID缺失");
			uni.showToast({ title: "商品不存在", icon: "error" });
			return;
		}

		// 加载商品详情
		console.log("调用商品详情API，参数:", { id: goodsId });
		const goodsRes = await service.goods.info.info({ id: goodsId });
		console.log("商品详情API响应:", goodsRes);

		if (!goodsRes || !goodsRes.id) {
			console.error("商品详情数据无效:", goodsRes);
			uni.showToast({ title: "商品不存在或已下架", icon: "error" });
			return;
		}

		goods.value = goodsRes;

		// 记录足迹
		if (userStore.token) {
			try {
				await service.user.footprint.recordFootprint({
					goodsId: Number(goodsId),
					name: goodsRes.title || goodsRes.oracleGoodsName,
					mainPic: goodsRes.mainPic,
					price: goodsRes.price, // 保存原价，显示时再计算折扣
				});
			} catch (error: any) {
				console.error("记录足迹失败:", error);
			}

			// 检查收藏状态
			checkCollectStatus();
		}

		// 加载推荐商品
		loadRecommendList();
		// 加载促销信息
		if (goodsRes.goodsId) {
			loadPromotions(goodsRes.goodsId);
		}
	} catch (error: any) {
		console.error("加载商品详情失败:", error, error.message);
		uni.showToast({ title: error.message || "加载失败", icon: "error" });
	}
}

function onImageChange() {
	// 处理图片切换
}

function previewImage(index: number) {
	uni.previewImage({
		urls: goodsImages.value,
		current: index,
	});
}

function addToCart() {
	if (!userStore.token) {
		router.push("/pages/user/login");
		return;
	}

	specMode.value = "cart";
	showSpecSelector.value = true;
}

function buyNow() {
	if (!userStore.token) {
		router.push("/pages/user/login");
		return;
	}

	specMode.value = "buy";
	showSpecSelector.value = true;
}

async function onSpecConfirm(spec: any) {
	try {
		const goodsId = goods.value.goodsId;
		console.log("购物车操作，使用的商品ID:", goodsId);
		console.log("商品数据:", goods.value);

		if (!goodsId) {
			uni.showToast({ title: "商品ID缺失", icon: "error" });
			return;
		}

		if (specMode.value === "cart") {
			// 加入购物车
			await service.order.cart.addCart({
				goodsId: goodsId,
				count: spec.count,
			});
			uni.showToast({ title: "添加成功", icon: "success" });
		} else {
			// 立即购买
			router.push(`/pages/order/submit?goodsId=${goodsId}&count=${spec.count}`);
		}
	} catch (error: any) {
		console.error("操作失败:", error);
		uni.showToast({ title: error.message || "操作失败", icon: "none" });
	}
	showSpecSelector.value = false;
}

// 检查收藏状态
async function checkCollectStatus() {
	try {
		const goodsId = goods.value.id || goods.value.goodsId || router.query.id;
		// 获取收藏列表检查是否已收藏
		const res = await service.user.collect.list();
		isCollected.value = res.some((item: any) => item.goodsId === goodsId);
	} catch (error) {
		console.error("检查收藏状态失败:", error);
	}
}

// 切换收藏状态
async function toggleCollect() {
	if (!userStore.token) {
		router.push("/pages/user/login");
		return;
	}

	try {
		const goodsId = goods.value.id || goods.value.goodsId || router.query.id;

		if (isCollected.value) {
			// 取消收藏
			await service.user.collect.delete({ ids: [goodsId] });
			isCollected.value = false;
			uni.showToast({ title: "已取消收藏", icon: "success" });
		} else {
			// 添加收藏
			await service.user.collect.collect({
				goodsId: goodsId,
				name: goods.value.title || goods.value.oracleGoodsName,
				mainPic: goods.value.mainPic,
				price: goods.value.price, // 保存原价，显示时再计算折扣
			});
			isCollected.value = true;
			uni.showToast({ title: "收藏成功", icon: "success" });
		}
	} catch (error) {
		console.error("操作收藏失败:", error);
		uni.showToast({ title: "操作失败", icon: "error" });
	}
}

// 加载推荐商品
async function loadRecommendList() {
	try {
		const res = await service.goods.info.page({
			page: 1,
			size: 10,
			typeId: goods.value.typeId || undefined,
			subTitle: "YES",
		});
		recommendList.value = res.list || [];
	} catch (error) {
		console.error("加载推荐商品失败:", error);
	}
}

// 分享功能
function handleShare() {
	// #ifdef H5
	if (navigator.share) {
		navigator
			.share({
				title: goods.value.title,
				text: goods.value.oracleGoodsName,
				url: window.location.href,
			})
			.catch((error) => console.log("分享失败", error));
	} else {
		uni.showToast({ title: "请复制链接分享", icon: "none" });
	}
	// #endif

	// #ifdef MP-WEIXIN
	uni.showShareMenu({
		withShareTicket: true,
		menus: ["shareAppMessage", "shareTimeline"],
	});
	// #endif

	// #ifdef APP-PLUS
	uni.share({
		provider: "weixin",
		scene: "WXSceneSession",
		type: 0,
		href: `https://shop.example.com/goods/${goods.value.id}`,
		title: goods.value.title,
		summary: goods.value.oracleGoodsName,
		imageUrl: goodsImages.value[0],
		success: function (res) {
			console.log("分享成功:" + JSON.stringify(res));
		},
		fail: function (err) {
			console.log("分享失败:" + JSON.stringify(err));
		},
	});
	// #endif
}

// 跳转到商品详情
function toDetail(id: number) {
	router.push({
		path: "/pages/goods/detail",
		query: { id },
	});
}

// 跳转到商品列表
function toProductList() {
	router.push("/pages/goods/list");
}

// 跳转到首页
function toHome() {
	router.push("/pages/index/home");
}

// 跳转到购物车
function toCart() {
	router.push("/pages/index/shopping-cart");
}

// 打开客服
function openService() {
	// TODO: 实现客服功能
	uni.showToast({ title: "客服功能开发中", icon: "none" });
}

// 加载商品促销信息
async function loadPromotions(goodsId: string) {
	try {
		isLoadingPromotions.value = true;
		console.log("加载促销信息，goodsId:", goodsId);

		// 获取商品相关的促销活动
		const promotionsRes = await service.goods.promo.getCombosByGoodsId({
			goodsId: goodsId,
		});

		console.log("促销信息响应:", promotionsRes);

		if (promotionsRes && Array.isArray(promotionsRes)) {
			// 清空之前的促销数据
			activePromotions.value = [];
			buyGiftPromotions.value = [];
			seckillPromotions.value = [];
			comboPromotions.value = [];

			// 过滤活动中的促销
			const now = new Date();
			const validPromotions = promotionsRes.filter((promo: any) => {
				const startTime = new Date(promo.startTime);
				const endTime = new Date(promo.endTime);
				return promo.status === 1 && now >= startTime && now <= endTime;
			});

			activePromotions.value = validPromotions;

			// 分类处理不同类型的促销
			validPromotions.forEach((promo: any) => {
				// 处理买赠促销
				if (promo.promType === "买赠") {
					// 找出当前商品的所有买赠详情
					const buyGiftDetails = promo.details?.filter(
						(detail: any) => detail.goodsId === goodsId && detail.status === 1
					);
					if (buyGiftDetails && buyGiftDetails.length > 0) {
						buyGiftDetails.forEach((buyGiftDetail: any, index: number) => {
							buyGiftPromotions.value.push({
								...buyGiftDetail,
								promotion: promo,
								originalRuleIndex: promo.details.findIndex((d: any) => d === buyGiftDetail), // 记录原始索引
							});
						});
					}
				}
				// 处理秒杀促销
				else if (promo.promType === "秒杀") {
					// 找出当前商品的秒杀详情
					const seckillDetail = promo.details?.find(
						(detail: any) => detail.goodsId === goodsId && detail.status === 1
					);
					if (seckillDetail) {
						seckillPromotions.value.push({
							...seckillDetail,
							promotion: promo,
						});
					}
				}
				// 处理套餐促销
				else if (promo.promType === "套餐") {
					// 检查套餐中是否包含当前商品
					const hasCurrentProduct = promo.details?.some(
						(detail: any) => detail.goodsId === goodsId && detail.status === 1
					);
					if (hasCurrentProduct) {
						comboPromotions.value.push(promo);
					}
				}
				// 处理满减促销
				else if (promo.promType === "满减") {
					// 满减促销通常适用于所有商品，无需特殊过滤
					// 这里可以根据实际业务逻辑调整
				}
			});

			console.log("处理后的促销数据:", {
				buyGiftPromotions: buyGiftPromotions.value,
				seckillPromotions: seckillPromotions.value,
				comboPromotions: comboPromotions.value,
			});
		}
	} catch (error) {
		console.error("加载促销信息失败:", error);
	} finally {
		isLoadingPromotions.value = false;
	}
}

// 显示秒杀选择器
function showSeckillSelector() {
	if (!userStore.token) {
		router.push("/pages/user/login");
		return;
	}
	console.log("显示秒杀弹窗，秒杀数据:", seckillPromotions.value);
	console.log("商品数据:", goods.value);
	console.log("商品图片:", goodsImages.value);
	showSeckillPopup.value = true;
}

// 确认秒杀购买
async function confirmSeckillPurchase() {
	showSeckillPopup.value = false;
	await handleSeckillPurchase();
}

// 秒杀数量增减方法
function decreaseSeckillQuantity() {
	if (seckillQuantity.value > 1) {
		seckillQuantity.value--;
	}
}

function increaseSeckillQuantity() {
	if (seckillPromotions.value.length > 0) {
		const maxQuantity = Math.min(
			Math.floor(Number(seckillPromotions.value[0].seckillStorNum)),
			Math.floor(Number(seckillPromotions.value[0].seckillNum))
		);
		if (seckillQuantity.value < maxQuantity) {
			seckillQuantity.value++;
		}
	}
}

function validateSeckillQuantity(e: any) {
	const value = parseInt(e.detail.value || e.target.value);
	if (isNaN(value) || value < 1) {
		seckillQuantity.value = 1;
	} else if (seckillPromotions.value.length > 0) {
		const maxQuantity = Math.min(
			Math.floor(Number(seckillPromotions.value[0].seckillStorNum)),
			Math.floor(Number(seckillPromotions.value[0].seckillNum))
		);
		if (value > maxQuantity) {
			seckillQuantity.value = maxQuantity;
		} else {
			seckillQuantity.value = value;
		}
	}
}

// 处理秒杀购买
async function handleSeckillPurchase() {
	if (!canSeckill.value || !goods.value) return;

	if (isSeckillPurchasing.value) return;

	isSeckillPurchasing.value = true;

	const seckill = seckillPromotions.value[0];
	const quantity = seckillQuantity.value;

	// 检查数量是否超过限购
	if (quantity > Math.floor(Number(seckill.seckillNum || 1))) {
		uni.showToast({
			title: `秒杀商品单次最多可购买${Math.floor(Number(seckill.seckillNum || 1))}件`,
			icon: "none",
		});
		isSeckillPurchasing.value = false;
		return;
	}

	// 检查库存
	if (quantity > Math.floor(Number(seckill.seckillStorNum || 0))) {
		uni.showToast({
			title: `秒杀商品库存不足，仅剩${Math.floor(Number(seckill.seckillStorNum || 0))}件`,
			icon: "none",
		});
		isSeckillPurchasing.value = false;
		return;
	}

	try {
		const seckillWithPromo = seckillPromotions.value[0] as any;
		const promotion = seckillWithPromo.promotion;

		if (!promotion) {
			uni.showToast({ title: "找不到对应的秒杀活动", icon: "error" });
			return;
		}

		uni.showLoading({ title: "秒杀中..." });

		await service.goods.promo.createSeckillOrder({
			billNo: promotion.billNo,
			goodsId: goods.value.goodsId,
			quantity: quantity,
			remark: "秒杀订单",
		});

		uni.hideLoading();
		uni.showToast({ title: "秒杀成功！", icon: "success" });

		// 跳转到订单页面
		setTimeout(() => {
			router.push("/pages/order/list");
		}, 1500);
	} catch (error: any) {
		uni.hideLoading();
		uni.showToast({ title: error.message || "秒杀失败，请重试", icon: "none" });
	} finally {
		isSeckillPurchasing.value = false;
	}
}

// 处理买赠购买 - 显示选择弹窗
async function handleBuyGiftPurchase() {
	console.log("点击买赠按钮");
	console.log("用户登录状态:", userStore.token ? '已登录' : '未登录');
	console.log("canBuyGift:", canBuyGift.value);
	console.log("buyGiftPromotions长度:", buyGiftPromotions.value.length);
	console.log("activePromotions:", activePromotions.value);
	
	if (!userStore.token) {
		router.push("/pages/user/login");
		return;
	}
	
	if (!canBuyGift.value || !goods.value || buyGiftPromotions.value.length === 0) {
		console.log("买赠条件不满足");
		return;
	}

	const promotion = activePromotions.value.find(p => p.promType === '买赠');
	console.log("找到的买赠促销:", promotion);
	if (!promotion || !promotion.details || promotion.details.length === 0) {
		console.log("没有找到有效的买赠促销");
		return;
	}

	// 如果只有一种组合，直接购买
	if (promotion.details.length === 1) {
		confirmBuyGiftPurchase(0);
		return;
	}

	// 多种组合时显示选择器
	selectedBuyGiftIndex.value = 0;
	const firstRule = promotion.details[0];
	buyGiftQuantity.value = Number(firstRule.num || 1);
	showBuyGiftPopup.value = true;
}

// 显示买赠确认弹窗
function showBuyGiftConfirm(buyGiftIndex: number) {
	console.log("点击参与买赠按钮，索引:", buyGiftIndex);
	
	if (!userStore.token) {
		router.push("/pages/user/login");
		return;
	}
	
	if (!canBuyGift.value || !goods.value || buyGiftPromotions.value.length === 0) {
		console.log("买赠条件不满足");
		return;
	}

	const buyGift = buyGiftPromotions.value[buyGiftIndex];
	if (!buyGift) {
		uni.showToast({ title: "买赠活动不存在", icon: "error" });
		return;
	}

	// 显示确认对话框
	uni.showModal({
		title: '确认参与买赠',
		content: `确定要参与"买${buyGift.num}送${buyGift.freeNum}"活动吗？\n\n${buyGift.remark || '购买指定数量商品即可获得相应赠品'}`,
		success: function (res) {
			if (res.confirm) {
				handleSingleBuyGiftPurchase(buyGiftIndex);
			}
		}
	});
}

// 处理单个买赠购买 - 直接购买指定索引的买赠
async function handleSingleBuyGiftPurchase(buyGiftIndex: number) {
	console.log("点击单个买赠按钮，索引:", buyGiftIndex);
	
	if (!userStore.token) {
		router.push("/pages/user/login");
		return;
	}
	
	if (!canBuyGift.value || !goods.value || buyGiftPromotions.value.length === 0) {
		console.log("买赠条件不满足");
		return;
	}

	// 找到对应的买赠详情
	const buyGift = buyGiftPromotions.value[buyGiftIndex];
	if (!buyGift) {
		uni.showToast({ title: "买赠活动不存在", icon: "error" });
		return;
	}

	// 使用买赠对象中存储的促销活动信息
	const promotion = buyGift.promotion;
	if (!promotion) {
		console.log("没有找到买赠对应的促销活动");
		uni.showToast({ title: "促销活动信息缺失", icon: "error" });
		return;
	}

	console.log("选中的买赠活动:", buyGift);
	console.log("对应的促销活动:", promotion);
	console.log("买赠数量:", buyGift.num, "赠送数量:", buyGift.freeNum);

	// 直接使用买赠数据创建订单，不依赖索引查找
	try {
		if (isBuyGiftPurchasing.value) return;
		isBuyGiftPurchasing.value = true;

		// 使用买赠活动的备注信息或者构建备注
		let remark = buyGift.remark || `买赠订单：购买 ${buyGift.goodsInfo?.title || goods.value.title} ${Number(buyGift.num)}${buyGift.goodsInfo?.unit || goods.value.unit}`;
		if (buyGift.freeGoodsInfo && buyGift.freeGoodsInfo.title) {
			remark += `，赠送 ${buyGift.freeGoodsInfo.title} ${Number(buyGift.freeNum)}${buyGift.freeGoodsInfo.unit || '件'}`;
		}

		uni.showLoading({ title: "下单中..." });
		
		console.log("创建买赠订单参数:", {
			billNo: promotion.billNo,
			goodsId: buyGift.goodsId || goods.value.goodsId,
			quantity: Number(buyGift.num || 1),
			remark: remark,
			promotionName: promotion.promName
		});
		
		await service.goods.promo.createBuyGiftOrder({
			billNo: promotion.billNo,
			goodsId: buyGift.goodsId || goods.value.goodsId,
			quantity: Number(buyGift.num || 1),
			remark: remark,
		});

		uni.hideLoading();
		uni.showToast({ title: "买赠订单创建成功！", icon: "success" });
		
		// 刷新页面数据
		setTimeout(() => {
			router.push("/pages/order/list");
		}, 1500);
		
	} catch (error: any) {
		uni.hideLoading();
		uni.showToast({
			title: error.message || "下单失败",
			icon: "none",
		});
		console.error("买赠下单错误:", error);
	} finally {
		isBuyGiftPurchasing.value = false;
	}
}

// 买赠组合选择变更
const onBuyGiftRuleChange = (index: number) => {
	selectedBuyGiftIndex.value = index;
	const promotion = activePromotions.value.find(p => p.promType === '买赠');
	if (promotion && promotion.details[index]) {
		const rule = promotion.details[index];
		buyGiftQuantity.value = Number(rule.num || 1);
	}
};

// 买赠数量控制
const decreaseBuyGiftQuantity = () => {
	const promotion = activePromotions.value.find(p => p.promType === '买赠');
	if (promotion && promotion.details[selectedBuyGiftIndex.value]) {
		const rule = promotion.details[selectedBuyGiftIndex.value];
		const minQty = Number(rule.num || 1);
		if (buyGiftQuantity.value > minQty) {
			buyGiftQuantity.value -= minQty;
		}
	}
};

const increaseBuyGiftQuantity = () => {
	const promotion = activePromotions.value.find(p => p.promType === '买赠');
	if (promotion && promotion.details[selectedBuyGiftIndex.value]) {
		const rule = promotion.details[selectedBuyGiftIndex.value];
		const minQty = Number(rule.num || 1);
		if (buyGiftQuantity.value + minQty <= 99) {
			buyGiftQuantity.value += minQty;
		}
	}
};

// 确认买赠购买
async function confirmBuyGiftPurchase(ruleIndex?: number) {
	if (isBuyGiftPurchasing.value) return;
	
	isBuyGiftPurchasing.value = true;
	
	const promotion = activePromotions.value.find(p => p.promType === '买赠');
	if (!promotion || !promotion.details) {
		uni.showToast({ title: "找不到买赠活动", icon: "error" });
		isBuyGiftPurchasing.value = false;
		return;
	}
	
	const index = ruleIndex !== undefined ? ruleIndex : selectedBuyGiftIndex.value;
	const rule = promotion.details[index];
	
	if (!rule) {
		uni.showToast({ title: "买赠规则不存在", icon: "error" });
		isBuyGiftPurchasing.value = false;
		return;
	}

	try {
		console.log("确认买赠购买 - 选择的规则索引:", index);
		console.log("确认买赠购买 - 规则详情:", rule);
		console.log("确认买赠购买 - 买赠数量:", rule.num, "赠送数量:", rule.freeNum);
		
		// 使用后端提供的备注信息或者构建备注
		let remark = rule.remark || `买赠订单：购买 ${rule.goodsInfo?.title || goods.value.title} ${Number(rule.num)}${rule.goodsInfo?.unit || goods.value.unit}`;
		if (rule.freeGoodsInfo && rule.freeGoodsInfo.title) {
			remark += `，赠送 ${rule.freeGoodsInfo.title} ${Number(rule.freeNum)}${rule.freeGoodsInfo.unit || '件'}`;
		}

		uni.showLoading({ title: "下单中..." });

		const quantity = ruleIndex !== undefined ? Number(rule.num || 1) : buyGiftQuantity.value;
		
		await service.goods.promo.createBuyGiftOrder({
			billNo: promotion.billNo,
			goodsId: rule.goodsId || goods.value.goodsId,
			quantity: quantity,
			remark: remark,
		});

		uni.hideLoading();
		showBuyGiftPopup.value = false;
		uni.showToast({ title: "买赠订单创建成功！", icon: "success" });

		// 跳转到订单页面
		setTimeout(() => {
			router.push("/pages/order/list");
		}, 1500);
	} catch (error: any) {
		uni.hideLoading();
		console.error("买赠下单失败:", error);
		uni.showToast({ title: error.message || "买赠下单失败", icon: "error" });
	} finally {
		isBuyGiftPurchasing.value = false;
	}
}

// 查看套餐促销
function viewComboPromotions() {
	router.push("/pages/market/promotion-list?type=TC");
}

// 计算用户折扣后的价格
function calculateDiscountedPrice(price: number): number {
	const discount = userStore.info?.discount || 1;
	return Number((price * discount).toFixed(2));
}

// 格式化批次日期
function formatBatchDate(dateString: string): string {
	if (!dateString) return "";
	try {
		return dayjs(dateString).format("YYYY-MM-DD");
	} catch (error) {
		return dateString;
	}
}

// 判断近效期是否小于180天
function isNearExpiry(dateString: string | null): boolean {
	if (!dateString) return false;
	try {
		const expiryDate = dayjs(dateString);
		const today = dayjs();
		const diffDays = expiryDate.diff(today, "day");
		return diffDays <= 180 && diffDays >= 0;
	} catch (error) {
		return false;
	}
}

// 页面滚动监听
onPageScroll((e) => {
	const opacity = Math.min(e.scrollTop / 300, 1);
	navOpacity.value = opacity;
});

onReady(() => {
	loadGoodsDetail();
});

// #ifdef MP-WEIXIN
// 分享给朋友
onShareAppMessage(() => {
	return {
		title: goods.value.title || "商品详情",
		path: `/pages/goods/detail?id=${goods.value.id}`,
		imageUrl: goodsImages.value[0],
	};
});

// 分享到朋友圈
onShareTimeline(() => {
	return {
		title: goods.value.title || "商品详情",
		query: `id=${goods.value.id}`,
		imageUrl: goodsImages.value[0],
	};
});
// #endif
</script>

<style lang="scss" scoped>
.goods-detail {
	background-color: #f8f9fa;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.nav-actions {
	display: flex;
	gap: 16rpx;
}

.nav-action {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(20rpx);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;

	&:active {
		transform: scale(0.9);
		background-color: rgba(0, 0, 0, 0.6);
	}
}

.image-section {
	position: relative;
	height: 750rpx;
	background-color: #ffffff;
}

.goods-swiper {
	height: 100%;
}

.goods-image {
	width: 100%;
	height: 100%;
}

.info-section {
	background-color: #ffffff;
	margin: 16rpx;
	border-radius: 16rpx;
	padding: 32rpx;
}

.price-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24rpx;
	position: relative;
}

.price-main {
	display: flex;
	align-items: baseline;
}

.price-value {
	font-size: 48rpx;
	color: #ff4757;
	font-weight: 700;
	margin-right: 8rpx;
}

.price-unit {
	font-size: 24rpx;
	color: #666;
	margin-right: 16rpx;
}

.original-price {
	font-size: 28rpx;
	color: #999;
	text-decoration: line-through;
	margin-left: 8rpx;
}

.seckill-price {
	font-size: 48rpx;
	color: #ff4757;
	font-weight: 700;
	margin-right: 8rpx;
}

.seckill-tag {
	display: flex;
	align-items: center;
	gap: 4rpx;
	background: linear-gradient(135deg, #ff4757, #ff6b6b);
	color: #fff;
	padding: 8rpx 16rpx;
	border-radius: 24rpx;
	margin-left: 16rpx;
	
	.tag-text {
		font-size: 20rpx;
		font-weight: 600;
	}
}

.price-login-tip {
	font-size: 32rpx;
	color: #ff6b6b;
	font-weight: 600;
	padding: 16rpx 32rpx;
	background: linear-gradient(135deg, #fff5f5, #ffe0e0);
	border-radius: 40rpx;
	border: 2rpx solid #ffcccc;
}

// 促销信息样式
.promotion-info {
	margin: 24rpx 0;
	
	.promotion-item {
		display: flex;
		align-items: center;
		padding: 16rpx 20rpx;
		background: linear-gradient(135deg, #fff8f0, #fff3e0);
		border-radius: 16rpx;
		margin-bottom: 12rpx;
		border-left: 6rpx solid #ff9800;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		&.buy-gift {
			background: linear-gradient(135deg, #f1f8e9, #e8f5e8);
			border-left-color: #4caf50;
		}
		
		&.seckill {
			background: linear-gradient(135deg, #ffebee, #ffcdd2);
			border-left-color: #f44336;
		}
		
		&.combo {
			background: linear-gradient(135deg, #e3f2fd, #bbdefb);
			border-left-color: #2196f3;
			cursor: pointer;
			
			&:active {
				background: linear-gradient(135deg, #e1f5fe, #b3e5fc);
			}
		}
		
		&.full-reduce {
			background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
			border-left-color: #4caf50;
		}
	}
	
	.promo-badge {
		display: flex;
		align-items: center;
		gap: 6rpx;
		background: linear-gradient(135deg, #4caf50, #388e3c);
		color: #fff;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
		
		&.seckill-badge {
			background: linear-gradient(135deg, #ff4757, #ff3742);
		}
		
		&.combo-badge {
			background: linear-gradient(135deg, #2196f3, #1976d2);
		}
		
		&.full-reduce-badge {
			background: linear-gradient(135deg, #4caf50, #388e3c);
		}
		
		.badge-text {
			font-size: 22rpx;
			font-weight: 600;
		}
	}
	
	.promo-content {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.promo-description {
			flex: 1;
			
			.promo-text {
				font-size: 24rpx;
				color: #666;
				line-height: 1.4;
				margin-bottom: 8rpx;
				display: block;
			}
		}
		
		.promo-action {
			flex-shrink: 0;
			margin-left: 16rpx;
			
			.promo-btn {
				background: linear-gradient(135deg, #4caf50, #388e3c);
				color: #fff;
				padding: 12rpx 24rpx;
				border-radius: 24rpx;
				font-size: 24rpx;
				font-weight: 500;
				text-align: center;
				transition: all 0.2s;
				
				&:active {
					transform: scale(0.96);
				}
				
				&.disabled {
					background: #ccc;
					color: #999;
					pointer-events: none;
				}
				
				.btn-text {
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}
		
		.promo-price {
			font-size: 32rpx;
			color: #ff4757;
			font-weight: bold;
			margin-right: 16rpx;
		}
	}
	
	.expiry-tag {
		display: flex;
		align-items: center;
		padding: 6rpx 12rpx;
		background: rgba(255, 152, 0, 0.1);
		border-radius: 16rpx;
		margin-top: 8rpx;
		width: fit-content;
		
		&.near-expiry {
			background: rgba(244, 67, 54, 0.1);
			
			.expiry-text {
				color: #f44336;
			}
		}
		
		.expiry-text {
			font-size: 20rpx;
			color: #ff9800;
			font-weight: 500;
		}
	}
}

.price-actions {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.collect-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8rpx;
	transition: all 0.3s;

	&:active {
		transform: scale(0.9);
	}

	.collect-text {
		font-size: 22rpx;
		color: #666;
		margin-top: 4rpx;
	}
}

.stock-tags {
	display: flex;
	gap: 12rpx;
	margin-top: 16rpx;
}

.tag {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 20rpx;
	color: #ffffff;

	&.success {
		background-color: #52c41a;
	}
	&.warning {
		background-color: #faad14;
	}
}

.goods-title {
	margin-bottom: 24rpx;
}

.title-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.4;
	margin-bottom: 8rpx;
	display: block;
}

.sub-title {
	font-size: 26rpx;
	color: #666;
	line-height: 1.3;
}

.service-promises {
	display: flex;
	gap: 32rpx;
	margin-bottom: 32rpx;
	padding: 24rpx;
	background-color: #f8f9ff;
	border-radius: 12rpx;
}

.promise-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.promise-text {
	font-size: 24rpx;
	color: #333;
}

.goods-details {
	border-top: 1rpx solid #eee;
	padding-top: 24rpx;
}

.detail-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20rpx;

	&:last-child {
		margin-bottom: 0;
	}
}

.detail-label {
	width: 160rpx;
	font-size: 26rpx;
	color: #666;
	flex-shrink: 0;
}

.detail-value {
	flex: 1;
	font-size: 26rpx;
	color: #333;

	&.low-stock {
		color: #ff4757;
		font-weight: 600;
	}
}

.package-info {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 8rpx;
}

.package-type {
	padding: 4rpx 12rpx;
	background-color: #52c41a;
	color: #ffffff;
	border-radius: 8rpx;
	font-size: 20rpx;
}

.package-desc {
	font-size: 24rpx;
	color: #666;
}

.sale-status {
	font-size: 24rpx;

	&.allow {
		color: #52c41a;
	}
	&.forbid {
		color: #ff4757;
	}
}

.comments-preview {
	margin-top: 32rpx;
	padding-top: 24rpx;
	border-top: 1rpx solid #eee;
}

.preview-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16rpx;
}

.preview-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a1a1a;
}

.preview-action {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.action-text {
	font-size: 24rpx;
	color: #666;
}

.comment-item {
	padding: 20rpx;
	background-color: #f8f9ff;
	border-radius: 12rpx;
}

.comment-user {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 12rpx;
}

.user-avatar {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
}

.user-name {
	font-size: 24rpx;
	color: #333;
	flex: 1;
}

.comment-stars {
	display: flex;
	gap: 4rpx;
}

.comment-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.4;
}

.content-section {
	background-color: #ffffff;
	margin: 16rpx;
	border-radius: 16rpx;
	padding: 32rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 20rpx;
}

.content-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

// 推荐商品样式
.recommend-section {
	background-color: #fff;
	margin: 16rpx;
	border-radius: 16rpx;
	padding: 32rpx;

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		gap: 12rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.more-link {
		display: flex;
		align-items: center;
		gap: 4rpx;
		font-size: 26rpx;
		color: #999;

		&:active {
			color: #666;
		}
	}

	.recommend-list {
		white-space: nowrap;
	}

	.recommend-item {
		display: inline-block;
		width: 280rpx;
		margin-right: 20rpx;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		overflow: hidden;
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
		}

		.item-image {
			position: relative;
			width: 100%;
			height: 280rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.discount-tag {
				position: absolute;
				top: 12rpx;
				right: 12rpx;
				background: linear-gradient(135deg, #ff6b6b, #ff5252);
				color: #fff;
				padding: 6rpx 16rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				font-weight: 600;
				box-shadow: 0 4rpx 8rpx rgba(255, 107, 107, 0.3);
			}
		}

		.item-info {
			padding: 16rpx;

			.item-name {
				font-size: 26rpx;
				color: #333;
				font-weight: 500;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 8rpx;
			}

			.item-spec {
				font-size: 22rpx;
				color: #999;
				margin-bottom: 12rpx;
			}

			.item-price {
				display: flex;
				align-items: baseline;

				.value {
					font-size: 32rpx;
					color: #ff4444;
					font-weight: 600;
				}

				.original-value {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
					margin-left: 12rpx;
				}

				.login-tip {
					font-size: 22rpx;
					color: #ff6b6b;
					padding: 4rpx 12rpx;
					background-color: #fff5f5;
					border-radius: 20rpx;
				}
			}
		}
	}
}

.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background-color: #ffffff;
	border-top: 1rpx solid #eee;
	display: flex;
	align-items: center;
	padding: 0 32rpx;
	z-index: 100;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.action-left {
	display: flex;
	gap: 40rpx;
}

.action-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
	padding: 8rpx;
	transition: all 0.3s;

	&:active {
		transform: scale(0.9);
	}
}

.action-text {
	font-size: 20rpx;
	color: #666;
}

.cart-badge {
	position: absolute;
	top: -8rpx;
	right: -8rpx;
	min-width: 32rpx;
	height: 32rpx;
	background-color: #ff4757;
	color: #ffffff;
	font-size: 20rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8rpx;
}

.action-right {
	flex: 1;
	display: flex;
	gap: 16rpx;
	margin-left: 40rpx;
}

.action-btn {
	height: 88rpx;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	margin-left: 16rpx;
	padding: 0 24rpx;
	white-space: nowrap;

	&.add-cart {
		background: linear-gradient(135deg, #ffb347, #ff9500);
		box-shadow: 0 4rpx 16rpx rgba(255, 152, 0, 0.3);
		flex: 1;
	}

	&.seckill-btn {
		background: linear-gradient(135deg, #ff4757, #ff3742);
		box-shadow: 0 4rpx 16rpx rgba(255, 71, 87, 0.3);
	}

	&.buygift-btn {
		background: linear-gradient(135deg, #9c27b0, #7b1fa2);
		box-shadow: 0 4rpx 16rpx rgba(156, 39, 176, 0.3);
	}

	&.combo-btn {
		background: linear-gradient(135deg, #2196f3, #1976d2);
		box-shadow: 0 4rpx 16rpx rgba(33, 150, 243, 0.3);
	}

	&.disabled {
		opacity: 0.6;
		pointer-events: none;
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	}
}

.btn-text {
	font-size: 28rpx;
	color: #ffffff;
	font-weight: 600;
}

// 秒杀弹窗样式
.seckill-popup {
	background: #fff;
	border-radius: 32rpx 32rpx 0 0;
	min-height: 600rpx;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 32rpx 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.popup-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
		
		.close-btn {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: #f5f5f5;
			transition: all 0.2s;
			
			&:active {
				background: #e0e0e0;
			}
			
			.close-icon {
				font-size: 28rpx;
				color: #666;
				font-weight: bold;
			}
		}
	}
	
	.popup-content {
		padding: 32rpx;
		min-height: 400rpx;
		
		.seckill-info {
			.goods-row {
				display: flex;
				gap: 24rpx;
				margin-bottom: 24rpx;
				
				.goods-thumb {
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
					flex-shrink: 0;
				}
				
				.goods-detail {
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 8rpx;
					
					.goods-name {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						line-height: 1.4;
					}
					
					.goods-spec {
						font-size: 26rpx;
						color: #999;
					}
				}
			}
			
			.price-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 24rpx;
				background: linear-gradient(135deg, #ffebee, #ffcdd2);
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				
				.seckill-price-info {
					display: flex;
					align-items: baseline;
					gap: 12rpx;
					
					.seckill-price {
						font-size: 40rpx;
						font-weight: bold;
						color: #ff4757;
					}
					
					.original-price {
						font-size: 28rpx;
						color: #999;
						text-decoration: line-through;
					}
				}
				
				.stock-info {
					.stock-text {
						font-size: 24rpx;
						color: #ff4757;
						font-weight: 500;
					}
				}
			}
			
			.quantity-row {
				display: flex;
				align-items: center;
				gap: 24rpx;
				
				.quantity-label {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
				
				.quantity-input-container {
					display: flex;
					align-items: center;
					border: 2rpx solid #e0e0e0;
					border-radius: 8rpx;
					overflow: hidden;
					
					.quantity-btn {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #f5f5f5;
						border: none;
						cursor: pointer;
						transition: all 0.2s;
						
						&:active {
							background: #e0e0e0;
						}
						
						.btn-icon {
							font-size: 32rpx;
							color: #666;
							font-weight: bold;
							line-height: 1;
						}
					}
					
					.quantity-input {
						width: 100rpx;
						height: 60rpx;
						text-align: center;
						border: none;
						outline: none;
						font-size: 28rpx;
						color: #333;
						background: #fff;
					}
				}
				
				.quantity-tips {
					font-size: 24rpx;
					color: #999;
					margin-left: auto;
				}
			}
		}
		
		.loading-info {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 200rpx;
			
			.loading-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	
	// 简化弹窗内容样式
	.popup-content-simple {
		padding: 32rpx;
		
		.seckill-content {
			// 商品信息
			.goods-info {
				display: flex;
				gap: 24rpx;
				margin-bottom: 24rpx;
				
				.goods-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
					flex-shrink: 0;
				}
				
				.goods-details {
					flex: 1;
					
					.goods-name {
						font-size: 30rpx;
						font-weight: 500;
						color: #333;
						line-height: 1.4;
						margin-bottom: 8rpx;
						display: block;
					}
					
					.goods-spec {
						font-size: 26rpx;
						color: #999;
						display: block;
					}
				}
			}
			
			// 价格信息
			.price-info {
				background: #fff5f5;
				border: 2rpx solid #ffcdd2;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 24rpx;
				
				.price-row {
					display: flex;
					align-items: baseline;
					gap: 16rpx;
					margin-bottom: 8rpx;
					
					.seckill-price {
						font-size: 40rpx;
						font-weight: bold;
						color: #ff4757;
						display: block;
					}
					
					.original-price {
						font-size: 28rpx;
						color: #999;
						text-decoration: line-through;
						display: block;
					}
				}
				
				.stock-info {
					font-size: 24rpx;
					color: #ff4757;
					font-weight: 500;
					display: block;
				}
			}
			
			// 数量选择
			.quantity-section {
				margin-bottom: 24rpx;
				
				.quantity-label {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 16rpx;
					display: block;
				}
				
				.quantity-controls {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 32rpx;
					margin-bottom: 12rpx;
					
					.quantity-btn {
						width: 80rpx;
						height: 80rpx;
						background: #f0f0f0;
						border: 2rpx solid #ddd;
						border-radius: 12rpx;
						font-size: 36rpx;
						color: #333;
						font-weight: bold;
						display: flex;
						align-items: center;
						justify-content: center;
						
						&:active {
							background: #e0e0e0;
							border-color: #ccc;
						}
					}
					
					.quantity-number {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
						min-width: 60rpx;
						text-align: center;
						display: block;
					}
				}
				
				.quantity-tip {
					font-size: 24rpx;
					color: #999;
					text-align: center;
					display: block;
				}
			}
			
			// 总价
			.total-price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #f8f8f8;
				padding: 20rpx;
				border-radius: 12rpx;
				
				.total-label {
					font-size: 28rpx;
					color: #333;
					display: block;
				}
				
				.total-amount {
					font-size: 36rpx;
					font-weight: bold;
					color: #ff4757;
					display: block;
				}
			}
		}
		
		.loading-content {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 200rpx;
			
			.loading-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	
	.popup-footer {
		display: flex;
		gap: 24rpx;
		padding: 24rpx 32rpx 32rpx;
		border-top: 1rpx solid #f0f0f0;
		
		.popup-btn {
			flex: 1;
			height: 88rpx;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: 500;
			transition: all 0.3s;
			
			&.cancel-btn {
				background: #f0f0f0;
				color: #666;
				
				&:active {
					background: #e0e0e0;
				}
			}
			
			&.confirm-btn {
				background: linear-gradient(135deg, #ff4757, #ff3742);
				color: #fff;
				box-shadow: 0 4rpx 16rpx rgba(255, 71, 87, 0.3);
				
				&:active {
					transform: scale(0.98);
					box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.5);
				}
				
				&.disabled {
					opacity: 0.6;
					pointer-events: none;
				}
			}
			
			.btn-text {
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
}

// 买赠弹窗样式
.buygift-popup {
	background: #fff;
	border-radius: 32rpx 32rpx 0 0;
	min-height: 600rpx;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 32rpx 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.popup-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
		
		.close-btn {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: #f5f5f5;
			
			.close-icon {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	
	.popup-content-simple {
		padding: 32rpx;
		max-height: 800rpx;
		overflow-y: auto;
		
		.buygift-content {
			// 套餐选择器
			.combo-selector {
				margin-bottom: 32rpx;
				
				.selector-label {
					font-size: 28rpx;
					font-weight: 500;
					color: #333;
					margin-bottom: 16rpx;
					display: block;
				}
				
				.combo-option {
					display: flex;
					align-items: center;
					padding: 24rpx 20rpx;
					margin-bottom: 16rpx;
					border: 2rpx solid #e0e0e0;
					border-radius: 12rpx;
					background: #fff;
					position: relative;
					transition: all 0.2s;
					
					&.selected {
						border-color: #ff4757;
						background: #fff5f5;
					}
					
					&:active {
						transform: scale(0.98);
					}
					
					.main-goods {
						flex: 2;
						
						.goods-name {
							font-size: 28rpx;
							font-weight: 500;
							color: #333;
							margin-bottom: 6rpx;
							display: block;
						}
						
						.goods-spec {
							font-size: 24rpx;
							color: #999;
							margin-bottom: 6rpx;
							display: block;
						}
						
						.buy-quantity {
							font-size: 26rpx;
							color: #ff4757;
							font-weight: 500;
							background: rgba(255, 71, 87, 0.1);
							padding: 4rpx 12rpx;
							border-radius: 16rpx;
							display: inline-block;
						}
					}
					
					.arrow-icon {
						font-size: 32rpx;
						color: #999;
						margin: 0 16rpx;
						flex-shrink: 0;
					}
					
					.gift-goods {
						flex: 2;
						
						.gift-name {
							font-size: 26rpx;
							font-weight: 500;
							color: #333;
							margin-bottom: 6rpx;
							display: block;
						}
						
						.gift-spec {
							font-size: 22rpx;
							color: #999;
							margin-bottom: 6rpx;
							display: block;
						}
						
						.gift-quantity {
							font-size: 24rpx;
							color: #4caf50;
							font-weight: 500;
							background: rgba(76, 175, 80, 0.1);
							padding: 4rpx 12rpx;
							border-radius: 16rpx;
							display: inline-block;
						}
					}
					
					.selection-indicator {
						position: absolute;
						top: 12rpx;
						right: 12rpx;
						width: 32rpx;
						height: 32rpx;
						background: #ff4757;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.indicator-icon {
							font-size: 20rpx;
							color: #fff;
							font-weight: bold;
						}
					}
				}
			}
			
			// 数量选择
			.quantity-section {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 32rpx;
				background: #f8f8f8;
				padding: 24rpx;
				border-radius: 12rpx;
				
				.quantity-label {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					display: block;
				}
				
				.quantity-controls {
					display: flex;
					align-items: center;
					
					.quantity-btn {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #f5f5f5;
						border: none;
						cursor: pointer;
						transition: all 0.2s;
						font-size: 32rpx;
						color: #666;
						font-weight: bold;
						
						&:first-child {
							border-radius: 30rpx 0 0 30rpx;
						}
						
						&:last-child {
							border-radius: 0 30rpx 30rpx 0;
						}
						
						&:active {
							background: #e0e0e0;
						}
					}
					
					.quantity-number {
						width: 100rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #fff;
						font-size: 28rpx;
						color: #333;
						border-top: 1rpx solid #e0e0e0;
						border-bottom: 1rpx solid #e0e0e0;
					}
				}
				
				.quantity-tip {
					font-size: 24rpx;
					color: #999;
					display: block;
				}
			}
			
			// 总价信息
			.total-info {
				background: #f8f9fa;
				border-radius: 12rpx;
				padding: 24rpx;
				margin-bottom: 32rpx;
				
				.total-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;
					
					.total-label {
						font-size: 28rpx;
						color: #333;
						display: block;
					}
					
					.total-amount {
						font-size: 32rpx;
						font-weight: bold;
						color: #ff4757;
						display: block;
					}
				}
				
				.gift-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.gift-label {
						font-size: 26rpx;
						color: #666;
						display: block;
					}
					
					.gift-value {
						font-size: 28rpx;
						font-weight: 500;
						color: #4caf50;
						display: block;
					}
				}
			}
		}
		
		.loading-content {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 200rpx;
			
			.loading-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	
	.popup-footer {
		display: flex;
		padding: 24rpx 32rpx 32rpx;
		gap: 16rpx;
		
		.popup-btn {
			flex: 1;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			transition: all 0.2s;
			
			&.cancel-btn {
				background: #f5f5f5;
				color: #333;
				
				&:active {
					background: #e0e0e0;
				}
			}
			
			&.confirm-btn {
				background: linear-gradient(135deg, #ff6b6b, #ff4757);
				color: #fff;
				
				&:active {
					transform: scale(0.98);
				}
				
				&.disabled {
					background: #ccc;
					color: #999;
					pointer-events: none;
				}
			}
			
			.btn-text {
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
}
</style>
